<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
	<link rel="stylesheet" href="../css/modal_style.css">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
	<script>
		$(function(){
			$('#addPrivilege').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
			
			$("#code").click(function(){
				$("#codeAlert").css("visibility","hidden");
			});
			$("#type").click(function(){
				$("#typeAlert").css("visibility","hidden");
			});
			$("#level").click(function(){
				$("#levelAlert").css("visibility","hidden");
				var level = $("#level").val();
				if(level == "1"){
					$("#pId").attr("disabled","disabled");
					$("#pIdAlert").css("visibility","hidden");
				}else if(level == "2"){
					$("#pId").removeAttr("disabled");
					var level = "1";
					getPrivilegeListByLevel(level);
				}else if(level == "3"){
					$("#pId").removeAttr("disabled");
					var level = "2";
					getPrivilegeListByLevel(level);
				}
			});
			$("#privilegeOrder").click(function(){
				$("#privilegeOrderAlert").css("visibility","hidden");
			});
			$("#pId").click(function(){
				$("#pIdAlert").css("visibility","hidden");
			});
		});
		
		//添加权限
		function addRole(){
			var ok2=false;
			var ok3=false;
			var ok4=false;
			var ok5=false;
			var ok6=false;
			
			var showName = $("#showName1").val();
			var code = $("#code").val();
			if(code!=""){
				ok2 = true;
			}else{
				$("#codeAlert").css("visibility","");
			}
			var type = $("#type").val();
			if(type!=""){
				ok3 = true;
			}else{
				$("#typeAlert").css("visibility","");
			}
			var level = $("#level").val();
			var pId = $("#pId").val();
			if(level!=""){
				ok4 = true;
				if(level != "1"){
					if(pId!=""){
						ok6 = true;
					}else{
						$("#pIdAlert").css("visibility","");
					}
				}else{
					ok6 = true;
				}
			}else{
				$("#levelAlert").css("visibility","");
			}
			var privilegeOrder = $("#privilegeOrder").val();
			if(privilegeOrder!=""){
				ok5 = true;
			}else{
				$("#privilegeOrderAlert").css("visibility","");
			}
			
			var moName = $("#moName").val();
			var remark = $("#remark").val();
			var moIcon = $("#moIcon").val();
			var iconfile = $("#iconfile").val();
			var link = $("#link").val();
			if(ok2 && ok3 && ok4 && ok5 && ok6){
				$.ajax({
				 url:serviceConfig.role.addPrivilege,
				 type: "get",
		         data:{
		         	showName:showName,
		         	code:code,
		         	type:type,
		         	level:level,
		         	privilegeOrder:privilegeOrder,
		         	moName:moName,
		         	pId:pId,
		         	remark:remark,
		         	iconfile:iconfile,
		         	moIcon:moIcon,
		         	link:link
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == 1){
		        	 	alert("添加成功");
		        	 	window.location.reload();//刷新当前页面.
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
            }
		}
		//根据权限等级获取权限列表
		function getPrivilegeListByLevel(level){
			$.ajax({
				 url:serviceConfig.role.getPrivilegeListByLevel,
				 type: "get",
		         data:{
		         	level:level
		         },
		         dataType: "json",
		         success:function(data){
		         	//console.log(data);
		        	 if(data.flag == '1'){
		        	 	var privilegeList = data.privilegeList;
		        	 	for(var i=0;i<privilegeList.length;i++){
		        	 		var showName = privilegeList[i].showName;
		        	 		if(showName == ""){
		        	 			showName = privilegeList[i].mobileMenuName
		        	 		}
		        	 		$("#pId").append("<option value='"+privilegeList[i].id+"'>"+showName+"</option>");
		        	 	}
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
		}
	</script>
</head>

<body>
	<div class="panel admin-panel">
			<div class="panel-head"><strong>添加权限</strong></div>
			<div style="float:left;width:50%;padding-left:30px;padding-top:20px;">
                <div style="float:left;padding-top:5px;"><strong>权限名称：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="showName1" name="showName1" placeholder="请填写权限名称"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="showNameAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写权限名称！</div>
                </div>
            </div>
			<div style="float:left;width:50%;padding-left:30px;padding-top:20px;">
                <div style="float:left;padding-top:5px;"><strong>菜单名称：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="moName" name="moName" placeholder="请填写菜单名称"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写菜单名称！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图标：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="iconfile" name="iconfile" placeholder="请填写图标"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="iconfileAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写图标！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>菜单图标：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="moIcon" name="moIcon" placeholder="请填写菜单图标"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="moIconAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写菜单图标！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>权限编码：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="code" name="code" placeholder="请填写权限编码"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="codeAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写权限编码！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>权限类型：</strong></div>
                <div style="float:left;">
					<select class="input" id="type" style="width:200px;" name="type">
						<option value="" >请选择权限类型</option>
						<option value="1">菜单</option>
						<option value="2">链接</option>
						<option value="3">按钮</option>
					</select>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="typeAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请选择权限类型！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>权限等级：</strong></div>
                <div style="float:left;">
					<select class="input" id="level" style="width:200px;" name="level">
						<option value="" >请选择权限等级</option>
						<option value="1">一级</option>
						<option value="2">二级</option>
						<option value="3">三级</option>
					</select>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="levelAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请选择权限等级！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>权限顺序：</strong></div>
                <div style="float:left;">
					<input type="number" style="width:200px;" class="input" id="privilegeOrder" name="privilegeOrder" placeholder="请填写权限顺序"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="privilegeOrderAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写权限顺序！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>父级权限：</strong></div>
                <div style="float:left;">
					<select class="input" id="pId" style="width:200px;" name="pId">
						<option value="" >请选择父级权限</option>
					</select>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="pIdAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写父级权限！</div>
                </div>
            </div>
            <div style="float:left;width:50%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;链接：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="link" name="link" placeholder="请填写权限链接"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写权限顺序！</div>
                </div>
            </div>
            <div style="float:left;width:100%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：</strong></div>
                <div style="float:left;">
					<textarea id="remark" style="width:90%;" class="input" rows="5" cols="50" placeholder="请填写备注" ></textarea>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="remarkAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写备注！</div>
                </div>
            </div>
            <div style="float:left;width:100%;padding-top:20px;padding-left:100px;">
            	<button class="button bg-main" style="width:80px;" id="" onclick="addRole()">确定</button>
            </div>
        </div>
    </div>
</body></html>